WebXR์์ ์ฌ์ค์ ์ธ ํ๋ฉด ๋ ๋๋ง๊ณผ ํ๊ฒฝ ๋งคํ ๊ธฐ์ ์ ํ๊ตฌํ๊ณ , ๊ฐ์ ๋ฐ ์ฆ๊ฐ ํ์ค ๊ฒฝํ์ ๋ชฐ์ ๊ฐ๊ณผ ์๊ฐ์ ์ถฉ์ค๋๋ฅผ ํฅ์์ํค๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
WebXR ๋ฐ์ฌ: ์ฌ์ค์ ์ธ ํ๋ฉด ๋ ๋๋ง๊ณผ ํ๊ฒฝ ๋งคํ
WebXR์ ์ ํต์ ์ธ 2D ์ธํฐํ์ด์ค๋ฅผ ๋์ด ๋ชฐ์ ํ 3D ํ๊ฒฝ์ผ๋ก ๋์๊ฐ๋ฉฐ ์ฐ๋ฆฌ๊ฐ ์น๊ณผ ์ํธ์์ฉํ๋ ๋ฐฉ์์ ํ์ ํ๊ณ ์์ต๋๋ค. ์ค๋๋ ฅ ์๊ณ ์ ๋ขฐํ ์ ์๋ WebXR ๊ฒฝํ์ ๋ง๋๋ ๋ฐ ์์ด ํต์ฌ ์์๋ ์ฌ์ค์ ์ธ ํ๋ฉด ๋ ๋๋ง์ ๋๋ค. ์ฌ๊ธฐ์๋ ๋น์ด ๋ค์ํ ์ฌ์ง๊ณผ ์ํธ์์ฉํ๋ ๋ฐฉ์์ ์ ํํ๊ฒ ์๋ฎฌ๋ ์ด์ ํ์ฌ, ์กด์ฌ๊ฐ๊ณผ ๋ชฐ์ ๊ฐ์ ๊ธฐ์ฌํ๋ ๋ฐ์ฌ, ๊ทธ๋ฆผ์ ๋ฐ ๊ธฐํ ์๊ฐ ํจ๊ณผ๋ฅผ ๋ง๋ค์ด๋ด๋ ๊ณผ์ ์ด ํฌํจ๋ฉ๋๋ค. ์ด ๊ธ์์๋ WebXR ํ๊ฒฝ ๋ด์์ ํนํ ๋ฐ์ฌ์ ํ๊ฒฝ ๋งคํ์ ์ด์ ์ ๋ง์ถฐ ์ฌ์ค์ ์ธ ํ๋ฉด ๋ ๋๋ง์ ๊ตฌํํ๋ ๋ฐ ์ฌ์ฉ๋๋ ํต์ฌ ๊ฐ๋ ๊ณผ ๊ธฐ์ ์ ๋ํด ์์ธํ ์์๋ด ๋๋ค.
WebXR์์ ์ฌ์ค์ ์ธ ๋ ๋๋ง์ ์ค์์ฑ
์ฌ์ค์ ์ธ ๋ ๋๋ง์ ๋จ์ํ ์ฌ๋ฌผ์ ์์๊ฒ ๋ง๋๋ ๊ฒ ์ด์์ ์๋ฏธ๋ฅผ ๊ฐ์ง๋๋ค. ์ด๋ XR ํ๊ฒฝ ๋ด์์ ์ฌ์ฉ์ ๊ฒฝํ๊ณผ ์ธ์์ ๊ทผ๋ณธ์ ์ธ ์ญํ ์ ํฉ๋๋ค. ๊ฐ์ฒด์ ํ๊ฒฝ์ด ์ฌ์ค์ ์ผ๋ก ๋ณด์ผ ๋, ์ฐ๋ฆฌ์ ๋๋ ๊ทธ๊ฒ๋ค์ ์ค์ ๋ผ๊ณ ๋ฐ์๋ค์ผ ๊ฐ๋ฅ์ฑ์ด ๋์์ ธ ๋ ๊ฐํ ์กด์ฌ๊ฐ์ ๋๋ผ๊ฒ ๋ฉ๋๋ค. ์ด๋ ๊ฐ์ ๊ด๊ด, ์๊ฒฉ ํ์ ๋ถํฐ ํ๋ จ ์๋ฎฌ๋ ์ด์ , ์ธํฐ๋ํฐ๋ธ ์คํ ๋ฆฌํ ๋ง์ ์ด๋ฅด๊ธฐ๊น์ง ๋ค์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
- ํฅ์๋ ๋ชฐ์ ๊ฐ: ์ฌ์ค์ ์ธ ์๊ฐ ํจ๊ณผ๋ ๋ ๊น์ ๋ชฐ์ ๊ฐ์ ๋ง๋ค์ด ์ฌ์ฉ์๊ฐ ๊ฐ์ ๋๋ ์ฆ๊ฐ ํ๊ฒฝ ๋ด์์ ๋ ํ์ค๊ฐ ์๊ฒ ์กด์ฌํ๋ค๊ณ ๋๋ผ๊ฒ ํฉ๋๋ค.
- ์ดํด๋ ํฅ์: ์ ํํ๊ฒ ๋ ๋๋ง๋ ๊ฐ์ฒด์ ์ฅ๋ฉด์ ํนํ ๊ต์ก์ด๋ ํ๋ จ ๋งฅ๋ฝ์์ ์ดํด๋๋ฅผ ๋์ผ ์ ์์ต๋๋ค. ๋ฏฟ์ ์ ์์ ์ ๋๋ก ์ค์ ์ฒ๋ผ ๋ณด์ด๊ณ ๋๊ปด์ง๋ ์ ๋ฌผ์ด ์๋ ๊ฐ์ ๋ฐ๋ฌผ๊ด์ ํํํ๋ค๊ณ ์์ํด ๋ณด์ญ์์ค.
- ์ฐธ์ฌ๋ ์ฆ๊ฐ: ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๊ณ ์ฌ์ค์ ์ธ ๊ฒฝํ์ ์ฌ์ฉ์์๊ฒ ๋ ํฐ ์ฆ๊ฑฐ์์ ์ฃผ๋ฉฐ, ์ด๋ ๋ ๋์ ์ฌ์ฉ์ ์ ์ง์จ๊ณผ ๊ธ์ ์ ์ธ ํผ๋๋ฐฑ์ผ๋ก ์ด์ด์ง๋๋ค.
- ์ธ์ง ๋ถํ ๊ฐ์: ์ฌ์ค์ ์ธ ๋ ๋๋ง์ ์ฐ๋ฆฌ์ ์ค์ ์ธ๊ณ ๊ธฐ๋์น์ ์ผ์นํ๋ ์๊ฐ์ ๋จ์๋ฅผ ์ ๊ณตํจ์ผ๋ก์จ ์ธ์ง ๋ถํ๋ฅผ ์ค์ผ ์ ์์ต๋๋ค.
ํ๋ฉด ๋ ๋๋ง์ ๊ธฐ๋ณธ
ํ๋ฉด ๋ ๋๋ง์ ๊ฐ์ฒด์ ์ฌ์ง ์์ฑ, ์กฐ๋ช ์กฐ๊ฑด, ์์ผ๊ฐ์ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ์ฒด ํ๋ฉด์ ์์๊ณผ ์ธ๊ด์ ๊ณ์ฐํ๋ ๊ณผ์ ์ ๋๋ค. ๋น์ด ํ๋ฉด๊ณผ ์ํธ์์ฉํ๋ ๋ฐฉ์์ ์ํฅ์ ๋ฏธ์น๋ ์ฌ๋ฌ ์์ธ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ฌ์ง ์์ฑ: ์ฌ์ง์ ์ข ๋ฅ(์: ๊ธ์, ํ๋ผ์คํฑ, ์ ๋ฆฌ)๋ ๋น์ ๋ฐ์ฌ, ๊ตด์ , ํก์ํ๋ ๋ฐฉ์์ ๊ฒฐ์ ํฉ๋๋ค. ์ฃผ์ ์ฌ์ง ์์ฑ์๋ ์์, ๊ฑฐ์น ๊ธฐ, ๊ธ์์ฑ, ํฌ๋ช ๋ ๋ฑ์ด ํฌํจ๋ฉ๋๋ค.
- ์กฐ๋ช : ๊ด์์ ๊ฐ๋, ์์, ๋ฐฉํฅ์ ํ๋ฉด์ ์ธ๊ด์ ํฐ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. ์ผ๋ฐ์ ์ธ ์กฐ๋ช ์ ํ์๋ ์ง์ฌ๊ด, ์ ๊ด์, ํ๊ฒฝ๊ด์ด ์์ต๋๋ค.
- ์์ผ๊ฐ: ๋ทฐ์ด๊ฐ ํ๋ฉด์ ๋ฐ๋ผ๋ณด๋ ๊ฐ๋๋ ์ ๋ฐ์ฌ ๋ฐ ๊ธฐํ ์์ผ๊ฐ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ ํจ๊ณผ๋ก ์ธํด ์ธ์ง๋๋ ์์๊ณผ ๋ฐ๊ธฐ์ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
์ ํต์ ์ผ๋ก WebGL์ ์ด๋ฌํ ๋ฌผ๋ฆฌ์ ํ์์ ๋ํ ๊ทผ์ฌ์น์ ํฌ๊ฒ ์์กดํ๊ธฐ ๋๋ฌธ์ ์๋ฒฝํ์ง ์์ ํ์ค๊ฐ์ ๋ณด์ฌ์ฃผ์์ต๋๋ค. ํ์ง๋ง ํ๋์ WebXR ๊ฐ๋ฐ์ ๋ฌผ๋ฆฌ ๊ธฐ๋ฐ ๋ ๋๋ง(PBR)๊ณผ ๊ฐ์ ๊ธฐ์ ์ ํ์ฉํ์ฌ ํจ์ฌ ๋ ์ ํํ๊ณ ์ค๋๋ ฅ ์๋ ๊ฒฐ๊ณผ๋ฅผ ์ป์ต๋๋ค.
๋ฌผ๋ฆฌ ๊ธฐ๋ฐ ๋ ๋๋ง (PBR)
PBR์ ๋ฌผ๋ฆฌ ์๋ฆฌ์ ๊ธฐ๋ฐํ์ฌ ๋น์ด ์ฌ์ง๊ณผ ์ํธ์์ฉํ๋ ๋ฐฉ์์ ์๋ฎฌ๋ ์ด์ ํ๋ ๋ ๋๋ง ๊ธฐ์ ์ ๋๋ค. ์์์ ์ธ ๊ทผ์ฌ์น์ ์์กดํ๋ ์ ํต์ ์ธ ๋ ๋๋ง ๋ฐฉ๋ฒ๊ณผ ๋ฌ๋ฆฌ, PBR์ ์๋์ง ๋ณด์กด๊ณผ ์ฌ์ง์ ์ผ๊ด์ฑ์ ์ถ๊ตฌํฉ๋๋ค. ์ด๋ ํ๋ฉด์์ ๋ฐ์ฌ๋๋ ๋น์ ์์ด ํ๋ฉด์ ๋น์ถ๋ ๋น์ ์์ ์ด๊ณผํด์๋ ์ ๋๋ฉฐ, ์ฌ์ง ์์ฑ์ ์กฐ๋ช ์กฐ๊ฑด์ ๊ด๊ณ์์ด ์ผ๊ด์ฑ์ ์ ์งํด์ผ ํ๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
PBR์ ํต์ฌ ๊ฐ๋ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์๋์ง ๋ณด์กด: ํ๋ฉด์์ ๋ฐ์ฌ๋๋ ๋น์ ์์ด ํ๋ฉด์ ๋น์ถ๋ ๋น์ ์์ ์ด๊ณผํด์๋ ์ ๋ฉ๋๋ค.
- ์๋ฐฉํฅ ๋ฐ์ฌ์จ ๋ถํฌ ํจ์ (BRDF): BRDF๋ ๋น์ด ๋ค์ํ ๊ฐ๋์์ ํ๋ฉด์ผ๋ก๋ถํฐ ์ด๋ป๊ฒ ๋ฐ์ฌ๋๋์ง๋ฅผ ์ค๋ช ํฉ๋๋ค. PBR์ ์ฌ์ค์ ์ธ ์ ๋ฐ์ฌ๋ฅผ ์๋ฎฌ๋ ์ด์ ํ๊ธฐ ์ํด Cook-Torrance๋ GGX ๋ชจ๋ธ๊ณผ ๊ฐ์ ๋ฌผ๋ฆฌ์ ์ผ๋ก ํ๋นํ BRDF๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ๋ง์ดํฌ๋กํ์ ์ด๋ก : PBR์ ํ๋ฉด์ด ๋น์ ๋ค๋ฅธ ๋ฐฉํฅ์ผ๋ก ๋ฐ์ฌํ๋ ๋ฏธ์ธํ ๋ฉด๋ค๋ก ๊ตฌ์ฑ๋์ด ์๋ค๊ณ ๊ฐ์ ํฉ๋๋ค. ํ๋ฉด์ ๊ฑฐ์น ๊ธฐ๋ ์ด๋ฌํ ๋ง์ดํฌ๋กํ์ ์ ๋ถํฌ๋ฅผ ๊ฒฐ์ ํ๋ฉฐ, ์ด๋ ์ ๋ฐ์ฌ์ ์ ๋ช ๋์ ๊ฐ๋์ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
- ๋ฉํ๋ฆญ ์ํฌํ๋ก์ฐ: PBR์ ์ข ์ข ์ฌ์ง์ ๊ธ์ ๋๋ ๋น๊ธ์(์ ์ ์ฒด)์ผ๋ก ๋ถ๋ฅํ๋ ๋ฉํ๋ฆญ ์ํฌํ๋ก์ฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๊ธ์ ์ฌ์ง์ ๋น์ ์ ๋ฐ์ฌํ๋ ๊ฒฝํฅ์ด ์๋ ๋ฐ๋ฉด, ๋น๊ธ์ ์ฌ์ง์ ๋ ๋ง์ ๋๋ฐ์ฌ ์์๋ฅผ ๊ฐ์ง๋๋ค.
PBR ์ฌ์ง์ ์ผ๋ฐ์ ์ผ๋ก ํ๋ฉด ์์ฑ์ ์ค๋ช ํ๋ ํ ์ค์ฒ ์ธํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ ์๋ฉ๋๋ค. ์ผ๋ฐ์ ์ธ PBR ํ ์ค์ฒ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋ฒ ์ด์ค ์ปฌ๋ฌ (์๋ฒ ๋): ํ๋ฉด์ ๊ธฐ๋ณธ ์์์ ๋๋ค.
- ๋ฉํ๋ฆญ: ์ฌ์ง์ด ๊ธ์์ธ์ง ๋น๊ธ์์ธ์ง๋ฅผ ๋ํ๋ ๋๋ค.
- ๋ฌํ๋์ค: ํ๋ฉด์ ๋งค๋๋ฌ์ ๋๋ ๊ฑฐ์น ๊ธฐ๋ฅผ ์ ์ดํ์ฌ ์ ๋ฐ์ฌ์ ์ ๋ช ๋์ ์ํฅ์ ์ค๋๋ค.
- ๋ ธ๋ฉ ๋งต: ํ๋ฉด ๋ ธ๋ฉ์ ์ธ์ฝ๋ฉํ๋ ํ ์ค์ฒ๋ก, ํด๋ฆฌ๊ณค ์๋ฅผ ๋๋ฆฌ์ง ์๊ณ ๋ ๋ฏธ์ธํ ๋ํ ์ผ์ ์๋ฎฌ๋ ์ด์ ํ ์ ์์ต๋๋ค.
- ์ฐ๋น์ธํธ ์คํด๋ฃจ์ (AO): ์ฃผ๋ณ ์ง์ค๋ฉํธ๋ฆฌ์ ์ํด ์ฐจ๋จ๋๋ ์ฃผ๋ณ๊ด์ ์์ ๋ํ๋ด์ด ํ๋ฉด์ ๋ฏธ๋ฌํ ๊ทธ๋ฆผ์์ ๊น์ด๋ฅผ ๋ํฉ๋๋ค.
๋ฐ์ฌ๋ฅผ ์ํ ํ๊ฒฝ ๋งคํ
ํ๊ฒฝ ๋งคํ์ ์ฃผ๋ณ ํ๊ฒฝ์ ์บก์ฒํ์ฌ ๋ฐ์ฌ๋๊ฑฐ๋ ๊ตด์ ๋ ๋น์ ์์์ ๊ฒฐ์ ํจ์ผ๋ก์จ ๋ฐ์ฌ์ ๊ตด์ ์ ์๋ฎฌ๋ ์ด์ ํ๋ ๋ฐ ์ฌ์ฉ๋๋ ๊ธฐ์ ์ ๋๋ค. ์ด ๊ธฐ์ ์ WebXR ํ๊ฒฝ์์ ๋น๋๊ฑฐ๋ ๊ดํ์ด ์๋ ํ๋ฉด์ ์ฌ์ค์ ์ธ ๋ฐ์ฌ๋ฅผ ๋ง๋๋ ๋ฐ ํนํ ์ ์ฉํฉ๋๋ค.
ํ๊ฒฝ ๋งต์ ์ข ๋ฅ
- ํ๋ธ ๋งต: ํ๋ธ ๋งต์ ์ค์ฌ์ ์์ ๋ณธ ํ๊ฒฝ์ ๋ํ๋ด๋ 6๊ฐ์ ํ ์ค์ฒ ๋ชจ์์ ๋๋ค. ๊ฐ ํ ์ค์ฒ๋ ํ๋ธ์ 6๊ฐ ๋ฉด ์ค ํ๋์ ํด๋นํฉ๋๋ค. ํ๋ธ ๋งต์ ์ฃผ๋ณ์ 360๋ ๋ทฐ๋ฅผ ์บก์ฒํ ์ ์์ด ํ๊ฒฝ ๋งคํ์ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋ฉ๋๋ค.
- ๋ฑ๊ฑฐ๋ฆฌ ์ง์ฌ๊ฐํ ๋งต (HDRI): ๋ฑ๊ฑฐ๋ฆฌ ์ง์ฌ๊ฐํ ๋งต์ ํ๊ฒฝ์ ์ ์ฒด ๊ตฌ๋ฅผ ๋ฎ๋ ํ๋ ธ๋ผ๋ง ์ด๋ฏธ์ง์ ๋๋ค. ์ด๋ฌํ ๋งต์ ์ข ์ข HDR(High Dynamic Range) ํ์์ผ๋ก ์ ์ฅ๋์ด ๋ ๋์ ๋ฒ์์ ์์๊ณผ ๊ฐ๋๋ฅผ ํ์ฉํ์ฌ ๋ ์ฌ์ค์ ์ธ ๋ฐ์ฌ๋ฅผ ๋ง๋ค์ด๋ ๋๋ค. HDRI๋ ํน์ ์นด๋ฉ๋ผ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ๋ ๋๋ง ์ํํธ์จ์ด๋ฅผ ์ฌ์ฉํ์ฌ ์์ฑ๋ฉ๋๋ค.
ํ๊ฒฝ ๋งต ์์ฑ
ํ๊ฒฝ ๋งต์ ์ฌ๋ฌ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ์์ฑํ ์ ์์ต๋๋ค:
- ์ฌ์ ๋ ๋๋ง๋ ํ๋ธ ๋งต: 3D ๋ ๋๋ง ์ํํธ์จ์ด๋ฅผ ์ฌ์ฉํ์ฌ ์คํ๋ผ์ธ์ผ๋ก ์์ฑ๋ฉ๋๋ค. ๋์ ํ์ง์ ์ ๊ณตํ์ง๋ง ์ ์ ์ด์ด์ ๋ฐํ์ ์ค์ ๋์ ์ผ๋ก ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
- ์ค์๊ฐ ํ๋ธ ๋งต ์์ฑ: ๋ฐ์ฌํ๋ ๊ฐ์ฒด์ ์์น์์ ์ค์๊ฐ์ผ๋ก ํ๊ฒฝ์ ๋ ๋๋งํ๋ ๋ฐฉ์์ ๋๋ค. ์ด๋ฅผ ํตํด ์ฅ๋ฉด์ ๋ณํ์ ์ ์ํ๋ ๋์ ๋ฐ์ฌ๊ฐ ๊ฐ๋ฅํ์ง๋ง, ๊ณ์ฐ ๋น์ฉ์ด ๋ง์ด ๋ค ์ ์์ต๋๋ค.
- ์บก์ฒ๋ HDRI: ํน์ ์นด๋ฉ๋ผ๋ฅผ ์ฌ์ฉํ์ฌ ์ค์ ํ๊ฒฝ์ HDRI๋ก ์บก์ฒํ ์ ์์ต๋๋ค. ์ด๋ ๋ฏฟ์ ์ ์์ ์ ๋๋ก ์ฌ์ค์ ์ธ ์กฐ๋ช ๋ฐ ๋ฐ์ฌ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํ์ง๋ง ์ ์ ์ ๋๋ค.
- ์ ์ฐจ์ ํ๊ฒฝ ๋งต: ์๊ณ ๋ฆฌ์ฆ์ ํตํด ์์ฑ๋์ด ๋์ ์ด๊ณ ์ฌ์ฉ์ ์ ์ ๊ฐ๋ฅํ ํ๊ฒฝ์ ๋ง๋ค ์ ์์ต๋๋ค. ์บก์ฒ๋๊ฑฐ๋ ์ฌ์ ๋ ๋๋ง๋ ๋งต๋ณด๋ค ๋ ์ฌ์ค์ ์ผ ์ ์์ง๋ง, ์คํ์ผํ๋๊ฑฐ๋ ์ถ์์ ์ธ ํ๊ฒฝ์ ์ ์ฉํ ์ ์์ต๋๋ค.
WebXR์์ ํ๊ฒฝ ๋งต ์ฌ์ฉํ๊ธฐ
WebXR์์ ํ๊ฒฝ ๋งต์ ์ฌ์ฉํ๋ ค๋ฉด ๋งต ๋ฐ์ดํฐ๋ฅผ ๋ก๋ํ๊ณ ์ฅ๋ฉด์ ๊ฐ์ฒด ์ฌ์ง์ ์ ์ฉํด์ผ ํฉ๋๋ค. ์ด๋ ์ผ๋ฐ์ ์ผ๋ก ํ๋ฉด ๋ ธ๋ฉ๊ณผ ์์ ๋ฐฉํฅ์ ๊ธฐ๋ฐ์ผ๋ก ํ๊ฒฝ ๋งต์ ์ํ๋งํ๋ ์ ฐ์ด๋๋ฅผ ๋ง๋๋ ๊ฒ์ ํฌํจํฉ๋๋ค. Three.js ๋ฐ Babylon.js์ ๊ฐ์ ์ต์ WebGL ํ๋ ์์ํฌ๋ ํ๊ฒฝ ๋งคํ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํ๋ฏ๋ก ์ด ๊ธฐ์ ์ WebXR ํ๋ก์ ํธ์ ๋ ์ฝ๊ฒ ํตํฉํ ์ ์์ต๋๋ค.
๋ ์ด ํธ๋ ์ด์ฑ (WebXR ๋ ๋๋ง์ ๋ฏธ๋)
PBR๊ณผ ํ๊ฒฝ ๋งคํ์ด ํ๋ฅญํ ๊ฒฐ๊ณผ๋ฅผ ์ ๊ณตํ์ง๋ง, ์ฌ์ค์ ์ธ ๋ ๋๋ง์ ๊ถ๊ทน์ ์ธ ๋ชฉํ๋ ๋น ๊ด์ ์ด ํ๊ฒฝ๊ณผ ์ํธ์์ฉํ๋ ๊ฒฝ๋ก๋ฅผ ์๋ฎฌ๋ ์ด์ ํ๋ ๊ฒ์ ๋๋ค. ๋ ์ด ํธ๋ ์ด์ฑ์ ์นด๋ฉ๋ผ์์ ์ฅ๋ฉด์ ๊ฐ์ฒด๊น์ง ๋น ๊ด์ ์ ๊ฒฝ๋ก๋ฅผ ์ถ์ ํ์ฌ ๋ฐ์ฌ, ๊ตด์ , ๊ทธ๋ฆผ์๋ฅผ ๋งค์ฐ ์ ํํ๊ฒ ์๋ฎฌ๋ ์ด์ ํ๋ ๋ ๋๋ง ๊ธฐ์ ์ ๋๋ค. WebXR์์์ ์ค์๊ฐ ๋ ์ด ํธ๋ ์ด์ฑ์ ์ฑ๋ฅ ํ๊ณ๋ก ์ธํด ์์ง ์ด๊ธฐ ๋จ๊ณ์ ์์ง๋ง, ๋ฏธ๋์ ์ง์ ํ ํฌํ ๋ฆฌ์ผ๋ฆฌ์คํฑ ๊ฒฝํ์ ๋ง๋๋ ๋ฐ ์์ฒญ๋ ์ ์ฌ๋ ฅ์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
WebXR์์์ ๋ ์ด ํธ๋ ์ด์ฑ ๊ณผ์ :
- ์ฑ๋ฅ: ๋ ์ด ํธ๋ ์ด์ฑ์ ํนํ ๋ณต์กํ ์ฅ๋ฉด์์ ๊ณ์ฐ ๋น์ฉ์ด ๋ง์ด ๋ญ๋๋ค. ์ค์๊ฐ ์ฑ๋ฅ์ ๋ฌ์ฑํ๊ธฐ ์ํด์๋ ๋ ์ด ํธ๋ ์ด์ฑ ์๊ณ ๋ฆฌ์ฆ์ ์ต์ ํํ๊ณ ํ๋์จ์ด ๊ฐ์์ ํ์ฉํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
- ์น ํ๋ซํผ ํ๊ณ: WebGL์ ํจ์จ์ ์ธ ๋ ์ด ํธ๋ ์ด์ฑ์ ํ์ํ ์ ์์ค ํ๋์จ์ด ๊ธฐ๋ฅ์ ์ ๊ทผํ๋ ๋ฐ ์ญ์ฌ์ ์ผ๋ก ํ๊ณ๊ฐ ์์์ต๋๋ค. ํ์ง๋ง ์๋ก์ด WebGPU API๋ ์ด๋ฌํ ํ๊ณ๋ฅผ ํด๊ฒฐํ๊ณ ๋ ๋ฐ์ ๋ ๋ ๋๋ง ๊ธฐ์ ์ ์ํ ๊ธธ์ ์ด์ด์ฃผ๊ณ ์์ต๋๋ค.
WebXR์์์ ๋ ์ด ํธ๋ ์ด์ฑ ์ ์ฌ๋ ฅ:
- ํฌํ ๋ฆฌ์ผ๋ฆฌ์คํฑ ๋ ๋๋ง: ๋ ์ด ํธ๋ ์ด์ฑ์ ์ ํํ ๋ฐ์ฌ, ๊ตด์ , ๊ทธ๋ฆผ์๋ก ๋ฏฟ์ ์ ์์ ์ ๋๋ก ์ฌ์ค์ ์ธ ์ด๋ฏธ์ง๋ฅผ ์์ฑํ ์ ์์ต๋๋ค.
- ์ ์ญ ์กฐ๋ช : ๋ ์ด ํธ๋ ์ด์ฑ์ ๋น์ด ํ๋ฉด์์ ๋ฐ์ฌ๋์ด ๊ฐ์ ์ ์ผ๋ก ํ๊ฒฝ์ ๋น์ถ๋ ์ ์ญ ์กฐ๋ช ํจ๊ณผ๋ฅผ ์๋ฎฌ๋ ์ด์ ํ์ฌ ๋ ์์ฐ์ค๋ฝ๊ณ ๋ชฐ์ ๊ฐ ์๋ ์กฐ๋ช ์ ๋ง๋ญ๋๋ค.
- ์ธํฐ๋ํฐ๋ธ ๊ฒฝํ: ์ต์ ํ๋ ๋ ์ด ํธ๋ ์ด์ฑ ์๊ณ ๋ฆฌ์ฆ๊ณผ ํ๋์จ์ด ๊ฐ์์ ํตํด ๋ฏธ๋์๋ ํฌํ ๋ฆฌ์ผ๋ฆฌ์คํฑ ๋ ๋๋ง์ ๊ฐ์ถ ์ธํฐ๋ํฐ๋ธ WebXR ๊ฒฝํ์ ๋ง๋๋ ๊ฒ์ด ๊ฐ๋ฅํด์ง ๊ฒ์ ๋๋ค.
์ค์ฉ์ ์ธ ์์ ์ ์ฝ๋ ์ค๋ํซ (Three.js)
์ธ๊ธฐ ์๋ WebGL ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ Three.js๋ฅผ ์ฌ์ฉํ์ฌ ํ๊ฒฝ ๋งคํ์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
HDR ํ๊ฒฝ ๋งต ๋ก๋ํ๊ธฐ
๋จผ์ , HDR(High Dynamic Range) ํ๊ฒฝ ๋งต์ด ํ์ํฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก .hdr ๋๋ .exr ํ์์ ๋๋ค. Three.js๋ ์ด๋ฌํ ํ์์ ์ํ ๋ก๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
import * as THREE from 'three';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
let environmentMap;
new RGBELoader()
.setPath( 'textures/' )
.load( 'venice_sunset_1k.hdr', function ( texture ) {
texture.mapping = THREE.EquirectangularReflectionMapping;
environmentMap = texture;
//Apply to a scene or material here (see below)
} );
์ฌ์ง์ ํ๊ฒฝ ๋งต ์ ์ฉํ๊ธฐ
ํ๊ฒฝ ๋งต์ด ๋ก๋๋๋ฉด `MeshStandardMaterial`(PBR ์ฌ์ง) ๋๋ `MeshPhongMaterial`๊ณผ ๊ฐ์ ์ฌ์ง์ `envMap` ์์ฑ์ ์ ์ฉํ ์ ์์ต๋๋ค.
const geometry = new THREE.SphereGeometry( 1, 32, 32 );
const material = new THREE.MeshStandardMaterial( {
color: 0xffffff,
metalness: 0.9, //Make it shiny!
roughness: 0.1,
envMap: environmentMap,
} );
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
๋์ ํ๊ฒฝ ๋งต (WebXR ๋ ๋ ํ๊ฒ ์ฌ์ฉ)
์ค์๊ฐ ๋์ ๋ฐ์ฌ๋ฅผ ์ํด `THREE.WebGLCubeRenderTarget`์ ์์ฑํ๊ณ ๋งค ํ๋ ์๋ง๋ค ์ฅ๋ฉด์ ๋ ๋๋งํ์ฌ ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค. ์ด๋ ๋ ๋ณต์กํ์ง๋ง ํ๊ฒฝ ๋ณํ์ ๋ฐ์ํ๋ ๋ฐ์ฌ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
//Create a cube render target
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 256 ); //Resolution of the cube map faces
const cubeCamera = new THREE.CubeCamera( 0.1, 1000, cubeRenderTarget ); //Near, far, renderTarget
//In your render loop:
cubeCamera.update( renderer, scene ); //Renders the scene to the cubeRenderTarget
//Then apply the cubeRenderTarget to your material:
material.envMap = cubeRenderTarget.texture;
์ค์ ๊ณ ๋ ค ์ฌํญ:
- ์ฑ๋ฅ: ๋์ ํ๊ฒฝ ๋งต์ ๋น์ฉ์ด ๋ง์ด ๋ญ๋๋ค. ํ๋ธ ๋งต ํ ์ค์ฒ์ ๋ฎ์ ํด์๋๋ฅผ ์ฌ์ฉํ๊ณ ์ ๋ฐ์ดํธ ๋น๋๋ฅผ ์ค์ด๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
- ์์น ์ง์ : `CubeCamera`๋ ๋ณดํต ๋ฐ์ฌํ๋ ๊ฐ์ฒด์ ์ค์์ ์ ํํ๊ฒ ์์นํด์ผ ํฉ๋๋ค.
- ์ฝํ ์ธ : ํ๋ธ ๋งต์ ๋ ๋๋ง๋๋ ์ฝํ ์ธ ๊ฐ ๋ฐ์ฌ๋๋ ๋ด์ฉ์ ๋๋ค. ๊ด๋ จ ๊ฐ์ฒด๊ฐ ์ฅ๋ฉด์ ์๋์ง ํ์ธํ์ญ์์ค.
WebXR ๋ ๋๋ง ์ต์ ํ ๊ธฐ๋ฒ
๋ ๋๋ง ์ฑ๋ฅ ์ต์ ํ๋ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ WebXR ๊ฒฝํ์ ๋ง๋๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ฃผ์ ์ต์ ํ ๊ธฐ๋ฒ์ ๋๋ค:
- ์ธ๋ถ ์์ค (LOD): ๋ทฐ์ด๋ก๋ถํฐ ๋ฉ๋ฆฌ ์๋ ๊ฐ์ฒด์๋ ์ ํด์๋ ๋ชจ๋ธ์ ์ฌ์ฉํฉ๋๋ค. Three.js์๋ ๋ด์ฅ๋ LOD ์ง์ ๊ธฐ๋ฅ์ด ์์ต๋๋ค.
- ํ ์ค์ฒ ์์ถ: Basis Universal (KTX2)๊ณผ ๊ฐ์ ์์ถ๋ ํ ์ค์ฒ ํ์์ ์ฌ์ฉํ์ฌ ํ ์ค์ฒ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ ์ค์ด๊ณ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ ํฉ๋๋ค.
- ์คํด๋ฃจ์ ์ปฌ๋ง: ๋ค๋ฅธ ๊ฐ์ฒด ๋ค์ ๊ฐ๋ ค์ง ๊ฐ์ฒด์ ๋ ๋๋ง์ ๋ฐฉ์งํฉ๋๋ค.
- ์ ฐ์ด๋ ์ต์ ํ: ํฝ์ ๋น ์ํ๋๋ ๊ณ์ฐ ์๋ฅผ ์ค์ด๋๋ก ์ ฐ์ด๋๋ฅผ ์ต์ ํํฉ๋๋ค.
- ์ธ์คํด์ฑ: ๋จ์ผ ๋๋ก์ฐ ์ฝ์ ์ฌ์ฉํ์ฌ ๋์ผํ ๊ฐ์ฒด์ ์ฌ๋ฌ ์ธ์คํด์ค๋ฅผ ๋ ๋๋งํฉ๋๋ค.
- WebXR ํ๋ ์ ์๋: ์์ ์ ์ธ ํ๋ ์ ์๋(์: 60 ๋๋ 90 FPS)๋ฅผ ๋ชฉํ๋ก ํ๊ณ ์ฑ๋ฅ์ ์ ์งํ๊ธฐ ์ํด ๋ ๋๋ง ์ค์ ์ ์กฐ์ ํฉ๋๋ค.
- WebGL2 ์ฌ์ฉ: ๊ฐ๋ฅํ ๊ฒฝ์ฐ, WebGL1๋ณด๋ค ์ฑ๋ฅ์ด ํฅ์๋ WebGL2์ ๊ธฐ๋ฅ์ ํ์ฉํฉ๋๋ค.
- ๋๋ก์ฐ ์ฝ ์ต์ํ: ๊ฐ ๋๋ก์ฐ ์ฝ์๋ ์ค๋ฒํค๋๊ฐ ์์ต๋๋ค. ๊ฐ๋ฅํ ๊ฒฝ์ฐ ์ง์ค๋ฉํธ๋ฆฌ๋ฅผ ์ผ๊ด ์ฒ๋ฆฌํ์ฌ ๋๋ก์ฐ ์ฝ ์๋ฅผ ์ค์ ๋๋ค.
ํฌ๋ก์ค ํ๋ซํผ ๊ณ ๋ ค ์ฌํญ
WebXR์ ํฌ๋ก์ค ํ๋ซํผ ๊ธฐ์ ์ ๋ชฉํ๋ก ํ๋ฉฐ, ํค๋์ , ํด๋ํฐ, ๋ฐ์คํฌํฑ ์ปดํจํฐ ๋ฑ ๋ค์ํ ๊ธฐ๊ธฐ์์ XR ๊ฒฝํ์ ์คํํ ์ ์๋๋ก ํฉ๋๋ค. ํ์ง๋ง ๋ค์๊ณผ ๊ฐ์ ๋ช ๊ฐ์ง ํฌ๋ก์ค ํ๋ซํผ ๊ณ ๋ ค ์ฌํญ์ ์ผ๋์ ๋์ด์ผ ํฉ๋๋ค:
- ํ๋์จ์ด ์ฑ๋ฅ: ๊ธฐ๊ธฐ๋ง๋ค ํ๋์จ์ด ์ฑ๋ฅ์ด ๋ค๋ฆ ๋๋ค. ๊ณ ์ฑ๋ฅ ํค๋์ ์ ๋ ์ด ํธ๋ ์ด์ฑ๊ณผ ๊ฐ์ ๊ณ ๊ธ ๋ ๋๋ง ๊ธฐ๋ฅ์ ์ง์ํ ์ ์์ง๋ง, ํด๋ํฐ์ ์ฑ๋ฅ์ด ๋ ์ ํ์ ์ผ ์ ์์ต๋๋ค. ๋์ ๊ธฐ๊ธฐ์ ๋ฐ๋ผ ๋ ๋๋ง ์ค์ ์ ์กฐ์ ํ์ญ์์ค.
- ๋ธ๋ผ์ฐ์ ํธํ์ฑ: WebXR ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ค์ํ ์น ๋ธ๋ผ์ฐ์ ๋ฐ XR ๋ฐํ์๊ณผ ํธํ๋๋์ง ํ์ธํ์ญ์์ค. ๋ค์ํ ๊ธฐ๊ธฐ์ ๋ธ๋ผ์ฐ์ ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ํ ์คํธํ์ญ์์ค.
- ์ ๋ ฅ ๋ฐฉ๋ฒ: ๊ธฐ๊ธฐ๋ง๋ค ์ปจํธ๋กค๋ฌ, ํธ๋ ํธ๋ํน, ์์ฑ ์ ๋ ฅ ๋ฑ ๋ค๋ฅธ ์ ๋ ฅ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ฌ๋ฌ ์ ๋ ฅ ๋ฐฉ๋ฒ์ ์ง์ํ๋๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค๊ณํ์ญ์์ค.
- ์ฑ๋ฅ ์ต์ ํ: ๋ชจ๋ ํ๋ซํผ์์ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ ์๋ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด ๊ฐ์ฅ ๋ฎ์ ์ฌ์์ ๋์ ๊ธฐ๊ธฐ์ ๋ง์ถฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ต์ ํํ์ญ์์ค.
WebXR ์ฌ์ค์ ๋ ๋๋ง์ ๋ฏธ๋
WebXR์ ์ฌ์ค์ ์ธ ๋ ๋๋ง ๋ถ์ผ๋ ๋์์์ด ๋ฐ์ ํ๊ณ ์์ต๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ํฅ๋ฏธ๋ก์ด ํธ๋ ๋์ ๋ฏธ๋ ๋ฐฉํฅ์ ๋๋ค:
- WebGPU: ์๋ก์ด ์น ๊ทธ๋ํฝ API์ธ WebGPU์ ๋ฑ์ฅ์ WebGL๋ณด๋ค ์๋นํ ์ฑ๋ฅ ํฅ์์ ์ฝ์ํ๋ฉฐ, ๋ ์ด ํธ๋ ์ด์ฑ๊ณผ ๊ฐ์ ๋ ์ง๋ณด๋ ๋ ๋๋ง ๊ธฐ์ ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- AI ๊ธฐ๋ฐ ๋ ๋๋ง: ์ธ๊ณต์ง๋ฅ(AI)์ ๋ ์ด ํธ๋ ์ด์ฑ ์ด๋ฏธ์ง์ ๋ ธ์ด์ฆ๋ฅผ ์ ๊ฑฐํ๊ณ ์ฌ์ค์ ์ธ ํ ์ค์ฒ๋ฅผ ์์ฑํ๋ ๋ฑ ๋ ๋๋ง ๊ธฐ์ ์ ํฅ์์ํค๋ ๋ฐ ์ฌ์ฉ๋๊ณ ์์ต๋๋ค.
- ๋ด๋ด ๋ ๋๋ง: ๋ด๋ด ๋ ๋๋ง ๊ธฐ์ ์ ๋ฅ๋ฌ๋์ ์ฌ์ฉํ์ฌ ์ ์ ์์ ์ ๋ ฅ ์ด๋ฏธ์ง๋ก๋ถํฐ ํฌํ ๋ฆฌ์ผ๋ฆฌ์คํฑ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.
- ์ค์๊ฐ ์ ์ญ ์กฐ๋ช : ์ฐ๊ตฌ์๋ค์ WebXR์์ ์ค์๊ฐ ์ ์ญ ์กฐ๋ช ๊ธฐ์ ์ ๊ฐ๋ฐํ์ฌ ๋ ์์ฐ์ค๋ฝ๊ณ ๋ชฐ์ ๊ฐ ์๋ ์กฐ๋ช ์ ๋ง๋ค๊ณ ์์ต๋๋ค.
- ํฅ์๋ ์์ถ: ํ ์ค์ฒ์ 3D ๋ชจ๋ธ์ ํฌ๊ธฐ๋ฅผ ์ค์ฌ ๋ก๋ฉ ์๊ฐ์ ๋จ์ถํ๊ณ ์ฑ๋ฅ์ ํฅ์์ํค๋ ์๋ก์ด ์์ถ ์๊ณ ๋ฆฌ์ฆ์ด ๊ฐ๋ฐ๋๊ณ ์์ต๋๋ค.
๊ฒฐ๋ก
PBR ๋ฐ ํ๊ฒฝ ๋งคํ๊ณผ ๊ฐ์ ๊ธฐ์ ์ ํฌํจํ ์ฌ์ค์ ์ธ ํ๋ฉด ๋ ๋๋ง์ ๋งค๋ ฅ์ ์ด๊ณ ๋ชฐ์ ๊ฐ ์๋ WebXR ๊ฒฝํ์ ๋ง๋๋ ๋ฐ ํ์์ ์ ๋๋ค. ๊ฐ๋ฐ์๋ ๋น ์ํธ์์ฉ์ ์๋ฆฌ๋ฅผ ์ดํดํ๊ณ , ์ต์ WebGL ํ๋ ์์ํฌ๋ฅผ ํ์ฉํ๋ฉฐ, ๋ ๋๋ง ์ฑ๋ฅ์ ์ต์ ํํจ์ผ๋ก์จ ์๊ฐ์ ์ผ๋ก ๋ฐ์ด๋๊ณ ๋งค๋ ฅ์ ์ธ ๊ฐ์ ๋ฐ ์ฆ๊ฐ ํ์ค ํ๊ฒฝ์ ๋ง๋ค ์ ์์ต๋๋ค. WebGPU ๋ฐ ๊ธฐํ ๊ณ ๊ธ ๋ ๋๋ง ๊ธฐ์ ์ด ๋์ฑ ์ฝ๊ฒ ์ฌ์ฉ ๊ฐ๋ฅํด์ง์ ๋ฐ๋ผ WebXR์ ์ฌ์ค์ ์ธ ๋ ๋๋ง์ ๋ฏธ๋๋ ๊ทธ ์ด๋ ๋๋ณด๋ค ๋ฐ์ผ๋ฉฐ, ์ง์ ์ผ๋ก ์ฌ์ค์ ์ด๊ณ ์ํธ์์ฉ์ ์ธ XR ๊ฒฝํ์ ์ํ ๊ธธ์ ์ด์ด์ฃผ๊ณ ์์ต๋๋ค.
ํ์คํ๋ ์์ฐ ์ ๋ฌ์ ์ํ ํฌ๋ก๋ ธ์ค ๊ทธ๋ฃน(Khronos Group)์ glTF ์ฌ์๊ณผ ๊ฐ์ ๋ฆฌ์์ค๋ฅผ ํ์ํ๊ณ , Mozilla ๋ฐ Google์ WebXR ์ํ์ ์คํํ์ฌ ์ดํด๋ฅผ ์ฌํํ์ญ์์ค. ์ง์ ํ ํฌํ ๋ฆฌ์ผ๋ฆฌ์คํฑ WebXR ๊ฒฝํ์ ํฅํ ์ฌ์ ์ ๊ณ์๋๊ณ ์์ผ๋ฉฐ, ์ฌ๋ฌ๋ถ์ ๊ธฐ์ฌ๊ฐ ๋ชฐ์ ํ ์น ๊ฐ๋ฐ์ ๋ฏธ๋๋ฅผ ํ์ฑํ ์ ์์ต๋๋ค.